<template>
	<view>
		<view style="display: flex;align-items: center;margin: 70rpx 60rpx 0 20rpx;">
			<view @click="backTo()" class="bg" style="width: 60rpx;height: 60rpx;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
				<image src="/static/shequ/返回@2x.png" style="width: 18rpx;height: 32rpx;"  mode="aspectFit"></image>
			</view>

			<view class="bg" style="width: 272rpx;height: 60rpx;border-radius: 30rpx;display: flex;align-items: center;justify-content: center;margin: 0 80rpx 0 20rpx;">
				<image src="/static/meishi/cherry@2x.png" style="width: 60rpx;height: 60rpx;border-radius: 50%;" mode="aspectFit"></image>
				<view style="display: flex;flex-direction: column;color: #fff;margin-left: 10rpx;">
					<text style="font-size: 24rpx;">孙奈奈</text>
					<text style="font-size: 18rpx;">1258观看</text>
				</view>
				<text style="margin: 0 10rpx 0 5rpx; width: 78rpx;height: 36rpx;border-radius: 18rpx;font-size: 24rpx;background-color: #00C657;color: #fff;padding: 1rpx 2rpx;display: flex;align-items: center;justify-content: center;">关注</text>
			</view>
			<view class="rs">
				<image src="/static/meishi/burger@2x.png" mode="aspectFit"></image>
				<image src="/static/meishi/burger@2x.png" style="margin-left: -40rpx;" mode="aspectFit"></image>
				<image src="/static/meishi/burger@2x.png" style="margin-left: -40rpx;" mode="aspectFit"></image>
				<view style="margin: 0 20rpx 0 -20rpx; width: 60rpx;height: 60rpx;border-radius: 50%;display: flex;align-items: center;justify-content: center;" class="bg">
					<image src="/static/index/更%20%20多@2x.png" style="width: 28rpx;height: 6rpx;" mode="aspectFit"></image>
				</view>
				<view style="width: 60rpx;height: 60rpx;border-radius: 50%;display: flex;align-items: center;justify-content: center;" class="bg">
					<image src="/static/waimai/分%20享%20(1)@2x.png" style="width: 42rpx;height: 42rpx;" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
		
		<live-player
		mode="live"
		autoplay="true"
		@statechange="statechange"
		style="width: 100%;height: 100%;"
		@error="error"
		></live-player>
		
		 <scroll-view scroll-y="true" >
			<view style="position: fixed;bottom: 150rpx;left: 30rpx;">
				<view style="font-size: 28rpx;color: #fff;">
					<view class="bgc" style="width: 274rpx;height: 56rpx;font-size: 28rpx;border-radius: 28rpx;display: flex;align-items: center;padding-left: 30rpx;">
						<text style="color: #00C657;">潘潘与刘</text>
						<text style="color: #1b1b1b;margin-left: 10rpx;">进来了</text>
					</view>
					<text class="bg" style="width: 500rpx;height: 108rpx;display: block;border-radius: 20rpx;padding: 19rpx 30rpx 21rpx;box-sizing: border-box;margin: 20rpx 0 20rpx 0;">房间公告:新主播求关注，10000星币朱管理,群号:689677443</text>
					<view class="bg" style="width: 300rpx;height: 80rpx;display: block;border-radius: 20rpx;padding: 19rpx 30rpx 21rpx;box-sizing: border-box;margin-bottom: 20rpx;">
						<text style="color: #00C657;">琪琪：</text>
						<text>大家下午好</text>
					</view>
					<view class="bg" style="width: 400rpx;height: 80rpx;display: block;border-radius: 20rpx;padding: 19rpx 30rpx 21rpx;box-sizing: border-box;">
						<text style="color: #00C657;">心随你动：</text>
						<text>大家下午好</text>
					</view>
				</view>
			</view>
		</scroll-view> 
		 <view style="display: flex;position: fixed;bottom: 41rpx; left: 30rpx;">
			<input type="text" value="" placeholder="一起聊天吧" class="bg" style="width: 469rpx;height: 66rpx;border-radius: 33rpx;padding-left: 20rpx;" placeholder-style="color:#fff;font-size:28rpx;" />
			<view class="lw" style="margin: 0 30rpx;">
				<image src="/static/zb/组%206@2x.png" style="width: 41rpx;height: 37rpx;" mode="aspectFit"></image>
			</view>
			<view class="lw bgc" style="position: relative;">
				<text style="font-size: 20rpx;color: #fff;background-color: #FF3333;border-radius: 13rpx;padding: 1rpx 2rpx;position: absolute;top: -20rpx;right: -10rpx;">126</text>
				<image src="/static/shequ/图层%205@2x.png" @click="open" style="width: 41rpx;height: 37rpx;" mode="aspectFit"></image>
			</view>			
		</view> 
		 <uni-popup ref="popup" type="bottom">
			<scroll-view scroll-y="true" >
				<view style="display: flex;flex-direction: column; width: 100%;padding: 55rpx 0 44rpx 30rpx;box-sizing: border-box; height: 725rpx;background-color: #fff;border-radius: 31rpx 31rpx 0 0;">
					<view v-for="(item,index) in 3" :key="index" style="display: flex;margin-bottom: 40rpx ;">
						<view style="width: 168rpx;height: 168rpx;border-radius: 10rpx;background-color: #F7F7F7;display: flex;align-items: center;justify-content: center;">
							<image src="" style="background-color: #707895; width: 136rpx;height: 105rpx;" mode="aspectFill"></image>
						</view>
						<view style="margin-left: 20rpx;margin-top: -20rpx;">
							<view style="display: flex;line-height: 40rpx; flex-direction: column;font-size: 24rpx;color: #999999;">
								<text style="font-size: 30rpx;color: #1B1B1B;margin-top: 14rpx;">好多个柠檬</text>
								<text style="width: 354rpx; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
									好吃水份多又大的柠檬正宗柠檬好吃水份多又大的柠檬正宗柠檬
								</text>
								<view style="display: flex;">
									<text>月售 256</text>
									<text>好评率100%</text>
								</view>
							</view>
							<view style="display: flex;align-items: center;	margin-top: 15rpx;">
								<view>
									<text style="font-size: 24rpx;color: #F61B00;">¥</text>
									<text style="font-size: 36rpx;color: #F61B00;">14.5</text>
									<text style="font-size: 24rpx;color: #B4B4B4;text-decoration: line-through;">¥20.5</text>
								</view>
								<text
									style="margin-left: 200rpx; display: flex;align-items: center;justify-content: center; width: 146rpx;height: 47rpx;background-color: #00C657;border-radius: 24rpx;color: #fff;font-size: 24rpx;"
								>
									抢购
								</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</uni-popup> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			open() {
				this.$refs.popup.open();
			},
			statechange(e){
				console.log('live-player code', e.detail.code)
			},
			error(e){
				console.error('live-player error', e.detail.errMsg)
			}
		}
	}
</script>

<style lang="scss">
.lw{
	width: 66rpx;
	height: 66rpx;
	border-radius: 50%;
	background: rgba($color: #000, $alpha: 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bgc{
	background: rgba($color: #fff, $alpha: 1);
}
.rs{
	display: flex;
}
.rs image{
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}
page{
	background-color: #DDBDC2;
}
.bg{
	background: rgba($color: #000, $alpha: 0.3);
}

</style>
